iT邦幫忙

2024 iThome 鐵人賽

DAY 12
1
JavaScript

不會 VueUse 而被提分手的我系列 第 12

D-12 useAsyncState 文件說明與範例 — 解析取經的過程

  • 分享至 

  • xImage
  •  

useAsyncState,這個功能讓我聯想到西遊記中的取經過程。就像唐僧師徒四人經歷九九八十一難,最終取得真經,useAsyncState 也讓我們在非同步的世界裡等待數據的回應。過程中可能充滿挑戰與不確定性,等待的時候總讓人焦慮,但只要堅持不懈,最終總會得到結果。這個過程教會了我,耐心和穩定是取得成功的關鍵。
https://ithelp.ithome.com.tw/upload/images/20240925/20162115P7hLOn0GJh.png

前情提要

useAsyncState是 VueUse 庫中處理非同步狀態的組合式函式。它優雅地管理非同步操作,包括加載狀態、錯誤處理和資料更新。本文將詳細介紹useAsyncState的功能、參數、使用場景,並提供實用範例。

useAsyncState API

功能

useAsyncState 用於處理非同步操作並管理相關的狀態。它接受一個非同步函式,並返回一個包含狀態、加載標誌、錯誤信息等的響應式對象。這個函式特別適用於需要處理非同步資料加載、API 調用等場景。

Props

名稱 類型 說明
promise Promise<Data> (...args: Params) => Promise<Data>
initialState Data 初始狀態,在第一次評估完成之前使用
options UseAsyncStateOptions<Shallow, Data> 可選參數,用於設定行為

options 參數

名稱 類型 默認值 說明
delay number 0 執行 Promise 的延遲時間(毫秒)
immediate boolean true 是否立即執行 Promise
onError (e: unknown) => void - 錯誤捕獲時的回調函式
onSuccess (data: D) => void - 成功時的回調函式
resetOnExecute boolean true 執行前是否重置狀態為初始狀態
shallow Shallow true 是否使用 shallowRef
throwError boolean false 執行時是否拋出錯誤

返回值

useAsyncState 返回一個對象,包含以下屬性:

名稱 類型 說明
state Ref<Data> 當前狀態
isReady Ref<boolean> 是否準備就緒
isLoading Ref<boolean> 是否正在加載
error Ref<unknown> 錯誤信息
execute (delay?: number, ...args: Params) => Promise<Data> 執行非同步操作的函式

用法範例

範例 1:基本用法

import { useAsyncState } from '@vueuse/core'

const { state, isReady, isLoading, error } = useAsyncState(
  fetch('https://api.github.com/users/BGM-Karl').then(r => r.json()),
  { name: '' }
)

console.log(isReady.value) // false
console.log(isLoading.value) // true
console.log(state.value) // { name: '' }

// 當請求完成時
console.log(isReady.value) // true
console.log(isLoading.value) // false
console.log(state.value) // { name: 'Your Name' }

範例 2:使用非同步函式

import { useAsyncState } from '@vueuse/core'

const fetchUserData = async (userId: string) => {
  const response = await fetch(`https://api.github.com/users/${userId}`)
  return response.json()
}

const { state, execute } = useAsyncState(fetchUserData, { name: '' }, { immediate: false })

// 稍後執行
execute('BGM-Karl')

範例 3:錯誤處理

import { useAsyncState } from '@vueuse/core'

const { state, error, execute } = useAsyncState(
  async () => {
    throw new Error('An error')
  },
  null,
  {
    onError: (e) => console.error(e),
    throwError: true
  }
)

try {
  await execute()
} catch (e) {
  console.log(error.value) // Error: An error occurred
}

useAsyncState 的使用場景

  1. API 調用:從伺服器獲取資料時,useAsyncState 能有效管理整個請求過程的狀態。
  2. 表單提交:處理非同步表單提交時,useAsyncState 可靈活管理提交狀態和結果。
  3. 資料預加載:在元件掛載時預加載資料,同時優雅地顯示加載狀態。
  4. 定期輪詢:結合 setInterval 使用 useAsyncState,實現高效的定期資料更新。

為什麼開發者需要 useAsyncState

  1. 簡化非同步邏輯useAsyncState 封裝複雜的非同步狀態管理邏輯,大幅簡化開發工作。
  2. 提高程式碼的可讀性:集中管理非同步操作狀態,使程式碼結構更清晰。
  3. 靈活設定:提供多種選項,如延遲執行、錯誤處理等,滿足不同場景需求。
  4. 響應式設計:返回響應式狀態,可直接用於模板,輕鬆在 Vue 中使用。

結論

useAsyncState 是一個強大而靈活的組合式函式,它簡化了 Vue 應用中的非同步狀態管理。透過提供直觀的 API 和豐富的設定選項,useAsyncState 能夠處理從簡單的資料獲取到複雜的非同步操作等各種場景。對於需要處理非同步操作並管理相關狀態的開發者來說,useAsyncState 是一個不可或缺的工具。

透過合理使用 useAsyncState,開發者可以大幅減少手動編寫非同步狀態管理邏輯的工作量,提高程式碼的可讀性和可維護性,同時確保應用中非同步操作的可靠性和一致性。

今天就先到這邊~明天再來解析 useAsyncState 如何做到這些功能的
如果有寫錯的地方,再麻煩留言讓我知道喔!


上一篇
D-11 用 useCycleList 來做一個簡單的輪播吧 (carousel) — 從需求分析到未來優化
下一篇
D-13 useAsyncState 解析與動機 — 取經的路上有你有我
系列文
不會 VueUse 而被提分手的我30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言